<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title></title>
    <style>
		th
		{
			width:50px ;
			background-color: green;
			color: white;
		}
		table,th,td{
			border: 1px solid #008000;
			text-align: center;
		}
		input.inp
		{
			height: 15px;
			float: right;
			clear: right;
		}
		.deal{
			display: inline-block
			float: left;
            margin-left: 50px;
		}
		
body {margin:0;}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    position: fixed;
    top: 0;
    width: 100%;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover:not(.active) {
    background-color: #111;
}


.active {
    background-color: #4CAF50;
	</style>
	<script>
		
      
		document.addEventListener('plusready', function(){
   			//console.log("所有plus api都应该在此事件发生后调用，否则会出现plus is undefined。")
   		});
		
		function myfunction() {
			document.getElementsByTagName("p")[2].innerHTML="皇上"
		}
		 
   		
    </script>
</head>
<body>
	<div>
	<h1 style="text-align: center;margin-top: 50px;">我的第一个html</h1>
	
	<div>
	<ul style="">
	  <li><a class="active" href="#home">主页</a></li>
	  <li><a href="#news">新闻</a></li>
	  <li><a href="#contact">联系</a></li>
	  <li><a href="#about">关于</a></li>
	</ul>
	</div>
	<div>
		<table border="1px;"style="width: 100%;">
		<thead><p style="text-align: center;">try to do best</p></thead>
		<tr>
			<th>上半场</th>
			<th>下半场</th>
		</tr>
		<tr>
			<td>12:8</td>
			<td>1</td>
		</tr>
		<tr>
			<td>1</td>
			<td>1</td>		
	</table>
	</div>
	<div style="margin-top: 20px;">
		<table border="0px" cellspacing="" cellpadding=""style=" width: 100%;">
			<thead >
				<p style="text-align: center;">fruit</p>
			</thead>
			<tr>
				<th rowspan="2">fruit</th>
				<td>banana</td>
			</tr>
			<tr>
				<td>grape</td>
			</tr>
		</table>
	</div>
	
	    
	<button class="bt" type="button" onclick="myfunction()"  style="width: 200px;"; >Click it!</button>
	<p>Look it!</p>
	<div style="width: 350px;">
		
	<form style="margin-right: 50px;">
	<p class="deal">联系人</p >	<input class = "inp" type="text" name="" id="" value="" style="display: inline-block" />
    <p class="deal">电子邮件</p>  <input class = "inp" type="text" name="" id="" value="" style="display: inline-block" />
	<p class="deal">电子邮件</p> <input class = "inp" type="text" name="" id="" value="" style="display: inline-block" />
	<p class="deal">电子邮件</p> <input class = "inp" type="text" name="" id="" value="" style="display: inline-block" />
	</form>
	</div>
	</div>
</body>
</html>
